<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/scorecard.voting.js"></script>
<title>Scorecard</title>
<style>
.btn-large {
  height: 100px;
  border-radius: 0px;
  border-bottom-right-radius: 100px;
}

.hero-unit {
  text-align: center;
  padding: 30px;
}

textarea {
  resize: none;
  font-size: 1.5em;
  padding: 1em;
}

#customerName,#customerSurname,#email {
  font-size: 1em;
  padding: 1em;
}

.myh {
  font-family: inherit;
  font-weight: bold;
  line-height: 40px;
  text-rendering: optimizelegibility;
}

.h1 {
  font-size: 38px;
}

.h2 {
  font-size: 30px;
}

.h3 {
  font-size: 24px;
}

#scroll {
  text-align: left;
}
</style>
</head>
<body>
  <div class="container">
    <p class="myh h1">
      <img src="assets/images/logo.png" alt="Banca Popolare di Vicenza" />
    </p>
    <div class="hero-unit">
      <p class="myh h2">Esprimi in libertà il grado di apprezzamento dei servizi bancari offerti dal nostro gruppo.</p>
    </div>
    <div class="row">
      <div class="span4">
        <textarea class="input-block-level" placeholder="Tocca qui se vuoi lasciare un commento" rows="19" name="comment" id="comment-placeholder"></textarea>
      </div>
      <div class="span8">
        <form name="voting" method="get" action="voting.html">
          <button class="myh h3 vote btn btn-block btn-large btn-primary" type="submit" data-score="7">Molto soddisfatto</button>
          <button class="myh h3 vote btn btn-block btn-large btn-warning" type="submit" data-score="5">Soddisfatto</button>
          <button class="myh h3 vote btn btn-block btn-large btn-info" type="submit" data-score="3">Mediamente soddisfatto</button>
          <button class="myh h3 vote btn btn-block btn-large" type="submit" data-score="1">Non del tutto soddisfatto</button>
        </form>
      </div>
    </div>
  </div>
  <div id="feedback" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="feedback" aria-hidden="true">
    <div class="modal-header">
      <p class="myh h1">
        <img src="assets/images/logo-small.png" alt="Banca D'Europa" />
      </p>
      <p class="myh h3">Votazione eseguita!</p>
    </div>
    <div class="modal-body">
      <p class="lead">Grazie per la collaborazione. Buona giornata!</p>
    </div>
    <div class="modal-footer"></div>
  </div>
  <div id="modalComment" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalComment" aria-hidden="true">
    <div class="modal-header">
      <p class="myh h1">
        <img src="assets/images/logo-small.png" alt="Banca D'Europa" />
      </p>
      <p class="myh h3">La tua opinione è importante per noi</p>
    </div>
    <div class="modal-body">
      <textarea class="input-block-level" placeholder="Scrivi qui il tuo commento" rows="8" name="comment" id="comment"></textarea>
      <input type="text" placeholder="Nome e cognome (facoltativo)" id="customerName" class="input-block-level " name="nome">
      <input type="email" placeholder="Indirizzo e-mail (facoltativo)" name="email" id="email" class="input-block-level">
    </div>
    <div class="modal-footer">
      <div class="container-fluid" id="scroll">
        <label class="checkbox" for="privacy"><input type="checkbox" id="privacy" name="privacy"> Accetto le condizioni sulla privacy </label>
      </div>
      <button class="invia btn btn-primary" aria-hidden="true" data-dismiss="modal" disabled name="invia" id="sendComment">Invia</button>
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</body>
</html>